<template>
	<view class="container-finance">
	  <view class="bottom">
		  
		<date-select class="list-select" :showMonth="true" @change="change" ></date-select>
		<view v-for="(item,index) in list" class="list-view" @click="tap" :data-item="item" :key="index">
		  <view class="view-title">
		          <view>{{item.time_year}} 年</view>
		          <view>{{item.time_month == 0 ? '全部' : item.time_month + '月'}}</view>
		        </view>
	      <view class="data-bottom">
	        <view class="data-show">
	          <view>{{item.income}}</view>
	          <view>收入</view>
	        </view>
	        <view class="data-show">
	          <view>{{item.pay}}</view>
	          <view>支出</view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>

</template>

<script>
	import dateSelect from "../../../components/select-date/select-date.vue"
	export default {
		data() {
			return {
				list:[],
				query:{year:'2020',month:'0'}
			}
		},
		components:{
			dateSelect
		},
		onLoad (options) {
		
		    this.changedNaviTitle()
		    this.getFinanceInfo()
		
		  },
		methods: {
			getFinanceInfo () {
			    const schoolId = this.$store.getters.currentSchool.school_id
				this.$api.getFinanceInfo({
			        school_id : schoolId,
					time_year : this.query.year,
					time_month : this.query.month
			      }).then((rep) =>{
					  let {data} = rep.data
					  this.list = [data]
			      })
			  },
			
			  changedNaviTitle () {
			    var school = this.$store.getters.currentSchool
				uni.setNavigationBarTitle({
				  title:school.school_name + '财务'
				})
			  },
			
			  tap (e) {
			    var item = e.currentTarget.dataset.item
			
			  },
			  
			  change(item){
			      console.log(item)
			      
			      this.query = item
			      this.getFinanceInfo()
			    },
			  
		}
		
	}
</script>

<style lang="scss">
.container-finance{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.list-view{
  margin-left: 10rpx;
  margin-right: 10rpx;
  height: 300rpx;
  background-color: #F5F5F5;
  border: 1px solid #ddd;
  padding-bottom: 24rpx;
  margin-top: 24rpx;
}

.list-select{
  margin-top: 10rpx;
}
	
.list-view:nth-child(1){
  margin-top: 0rpx;
}

.bottom{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 100%;
}
.data-bottom{
  display: flex;
  height: 80%;
}
.view-title{
  margin-top: 10rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding-left: 10rpx;
  padding-right: 20rpx;

}
.view-title > view{
  margin-left: 20rpx;
}
.data-show{
  width: 50%;
  display: inline-block;
  margin-top: 10rpx;
  text-align: center;
  align-self: center;
}
.data-show > view:nth-child(1){
  font-size: 30px;
}
</style>
